<template>
  <div class="health-monitor-container">
    <van-icon name="arrow-left" size="20px" @click="goBack" style="float: left;margin-top: 33px" />
    <h1 class="title">健康监测</h1>
    <div v-for="(item, index) in healthData" :key="index" class="health-item" @click="goToDetail(item)">
      <div class="icon-name-time-wrapper">
        <img :src="item.icon" alt="" class="icon">
        <div class="name-time">
          <span class="name">{{item.name}}</span>
          <span class="time">{{formatTime(item.time)}}</span>
        </div>
      </div>
      <div class="value-unit-status-wrapper">
        <span class="value">{{item.value}} <span style="color: gray;font-size: 14px">{{item.unit}}</span></span>
        <span class="unit"></span>
        <span :class="getStatusClass(item.status)">{{getStatusText(item.status)}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      healthData: [
        {
          name: '体重',
          value: '',
          unit: 'Kg',
          time: '',
          status: '',
          icon: "http://srhtngjmu.hn-bkt.clouddn.com/index/%E4%BD%93%E9%87%8D.png?e=1739522355&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:xhnISM4enc7xGsCPCaMFG4GdWAM="
        },
        {
          name: '血糖',
          value: '',
          unit: 'mmol/L',
          time: '',
          status: '',
          icon: "http://srhtngjmu.hn-bkt.clouddn.com/index/%E8%A1%80%E7%B3%96.png?e=1739522560&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:VbWnb37GxH2r7hr97qd-fC-Iawk="
        },
        {
          name: '血压',
          value: '',
          unit: 'mmHg',
          time: '',
          status: '',
          icon: "http://srhtngjmu.hn-bkt.clouddn.com/index/%E8%A1%80%E5%8E%8B.png?e=1739522629&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:cg386PA8zycY2PoF5F82AiWJzZc="
        },
        {
          name: '心率',
          value: '',
          unit: 'bmp',
          time: '',
          status: '',
          icon: "http://srhtngjmu.hn-bkt.clouddn.com/index/%E5%BF%83%E7%8E%87.png"
        }
      ]
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goToDetail(item) {
      let routeName;
      let params;
      switch (item.name) {
        case '体重':
          routeName = 'monitor';
          params = { value: item.value };
          break;
        case '血糖':
          routeName = 'sugarMonitor';
          params = { value: item.value };
          break;
        case '血压':
          routeName = 'pressure';
          params = { value: item.value };
          break;
        case '心率':
          routeName = 'heart';
          params = { value: item.value };
          break;
        default:
          break;
      }
      if (routeName) {
        this.$router.push({
          name: routeName,
          params: params
        });
      }
    },
    // 查询体重
    async getWeight() {
      try {
        const response = await axios.get('http://localhost:10086/api/doctor/health_monitoring_weight/findWeight');
        const data = response.data.data;
        const weightItem = this.healthData.find(item => item.name === '体重');
        if (weightItem) {
          weightItem.value = data.weight;
          weightItem.time = data.recordTime;
          weightItem.status = this.convertStatus(data.status);
        }
      } catch (error) {
        console.error('查询体重失败:', error);
      }
    },
    // 查询血糖
    async getBloodSugar() {
      try {
        const response = await axios.get('http://localhost:10086/api/doctor/health_monitoring_blood_sugar/findBloodSugar');
        const data = response.data.data;
        const bloodSugarItem = this.healthData.find(item => item.name === '血糖');
        if (bloodSugarItem) {
          bloodSugarItem.value = data.bloodSugar;
          bloodSugarItem.time = data.recordTime;
          bloodSugarItem.status = this.convertStatus(data.status);
        }
      } catch (error) {
        console.error('查询血糖失败:', error);
      }
    },
    // 查询血压
    async getBloodPressure() {
      try {
        const response = await axios.get('http://localhost:10086/api/doctor/health_monitoring_blood_pressure/findBloodPressure');
        const data = response.data.data;
        const bloodPressureItem = this.healthData.find(item => item.name === '血压');
        if (bloodPressureItem) {
          bloodPressureItem.value = data.systolicPressure + '/' + data.diastolicPressure;
          bloodPressureItem.time = data.recordTime;
          bloodPressureItem.status = this.convertStatus(data.status);
        }
      } catch (error) {
        console.error('查询血压失败:', error);
      }
    },
    // 查询心率
    async getHeartRate() {
      try {
        const response = await axios.get('http://localhost:10086/api/doctor/health_monitoring_heart_rate/findHeartRate');
        const data = response.data.data;
        const heartRateItem = this.healthData.find(item => item.name === '心率');
        if (heartRateItem) {
          heartRateItem.value = data.heartRate;
          heartRateItem.time = data.recordTime;
          heartRateItem.status = this.convertStatus(data.status);
        }
      } catch (error) {
        console.error('查询心率失败:', error);
      }
    },
    // 格式化时间
    formatTime(time) {
      if (!time) return '';
      return time.split('T')[0] + ' ' + time.split('T')[1].substring(0, 5);
    },
    // 获取状态文本
    getStatusText(status) {
      switch (status) {
        case 'normal':
          return '正常';
        case 'abnormal-high':
          return '偏高';
        case 'abnormal-low':
          return '偏低';
        case 'abnormal':
          return '异常';
        default:
          return status;
      }
    },
    // 获取状态类名
    getStatusClass(status) {
      switch (status) {
        case 'normal':
          return 'normal-status';
        case 'abnormal-high':
          return 'abnormal-high-status';
        case 'abnormal-low':
          return 'abnormal-low-status';
        case 'abnormal':
          return 'abnormal-status';
        default:
          return '';
      }
    },
    // 转换状态
    convertStatus(status) {
      switch (status) {
        case '正常':
          return 'normal';
        case '偏高':
          return 'abnormal-high';
        case '偏低':
          return 'abnormal-low';
        case '异常':
          return 'abnormal';
        default:
          return status;
      }
    }
  },
  created() {
    const token = JSON.parse(localStorage.getItem("token"));
    if (!token) {
      this.$message.error('请先登录');
      setTimeout(() => {
        this.$router.push({ name: 'login' });
      }, 666);
    }
    // 设置全局默认请求头
    axios.defaults.headers.common['token'] = token;

    // 调用查询方法
    this.getWeight();
    this.getBloodSugar();
    this.getBloodPressure();
    this.getHeartRate();
  }
};
</script>

<style scoped>
.health-monitor-container {
  padding: 20px;
  /*background-color: #f4f4f4;*/
}

.title {
  text-align: center;
  margin-bottom: 20px;
}

.health-item {
  background-color: white;
  border-radius: 10px;
  padding: 25px;
  margin-top: 30px;
  box-shadow: 0 0 10px 5px rgba(0, 112, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-name-time-wrapper {
  display: flex;
  align-items: center;
}

.icon {
  width: 50px;
  height: 50px;
  margin-top: 0px;
  margin-right: 10px;
}

.name-time {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 18px;
  font-weight: bold;
}

.time {
  font-size: 14px;
  color: #666;
}

.value-unit-status-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.value {
  font-size: 20px;
  font-weight: bold;
  margin-right: 5px;
}

.unit {
  font-size: 16px;
}

.normal-status {
  color: #4CAF50;
  background-color: #E8F5E9;
  padding: 3px 8px;
  border-radius: 5px;
}

.abnormal-status {
  color: #F44336;
  background-color: #FFEBEE;
  padding: 3px 8px;
  border-radius: 5px;
}

.abnormal-high-status {
  color: #FF9800;
  background-color: #FFF3E0;
  padding: 3px 8px;
  border-radius: 5px;
}

.abnormal-low-status {
  color: #2196F3;
  background-color: #E3F2FD;
  padding: 3px 8px;
  border-radius: 5px;
}
</style>